<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ckplayer</title>
    <meta name="viewport" content="width=device-width">
    <link type="text/css" rel="stylesheet" href="ckplayer/css/ckplayer.css"/>
    <script type="text/javascript" src="ckplayer/js/ckplayer.js" charset="UTF-8"></script>
</head>
<body>

<div>
    <form action="" id="load-url" class="form1">
        <label for="url">视频地址：</label>
        <input type="text" size="100" id="url">
        <button type="submit">加载</button>
    </form>
</div>

<div id="video" style="width: 400px;height: 300px"></div>



<script type="text/javascript">
    //定义一个变量：videoObject，用来做为视频初始化配置
    var videoObject = {
        container: '#video', //“#”代表容器的ID，“.”或“”代表容器的class
        // video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址
        // live: true,//指定为直播
        autoplay: true,//自动播放
        plug: 'hls.js',//使用hls.js插件播放m3u8
        // video: 'https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8?BR=single'//视频地址
        video: ''//视频地址
    };
    // var player = new ckplayer(videoObject);//初始化播放器
    // hook up the video switcher
    var loadUrl = document.getElementById('load-url');
    var url = document.getElementById('url');
    loadUrl.addEventListener('submit', function (event) {
        event.preventDefault();
        // player.src({
        //     src: url.value,
        //     type: 'application/x-mpegURL'
        // });
        videoObject.video = url.value;
        var player = new ckplayer(videoObject);//初始化播放器
        return false;
    });

</script>
</body>
</html>
